<template>
  <div class="template-workUnitChangeForm-Lu">
    <a-modal
      :title="isView?'工作单位变更表':'工作单位变更申请'"
      :visible="increaseVisible"
      :maskClosable="false"
      :closable="true"
      :destroyOnClose="true"
      width="50%"
      :footer="false"
      :dialog-style="{ margin: '0 auto' }"
      wrapClassName="form-workUnitChangeModal-Lu"
      @cancel="closeVisible">
      <div>
        <a-form layout="inline" class="personal-info-form" :form="form" :key="formKey">
          <a-descriptions bordered style="width: 100%;" :column="2" class="descriptions-dengji">
            <a-descriptions-item>
              <span slot="label" class="descriptions-label-slot">
                申请日期
              </span>
              <a-form-item>
                {{ moment(fromState.ffqsj).format('YYYY-MM-DD') }}
              </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item>
              <span slot="label" class="descriptions-label-slot">
                姓名
              </span>
              <a-form-item>
              {{ fromState.realname }}
            </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item :span="2">
              <span slot="label" class="descriptions-label-slot">
                原工作单位
              </span>
              <a-form-item>
              {{ fromState.fbgqxx }}
            </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item :span="2">
              <span slot="label" class="descriptions-label-slot">
                <span class="xhText" v-if="link == 1">*</span>
                  新工作单位
                </span>
                <a-form-item class="flex-w-row">
                  <span v-if="isView">{{ fromState.fbghxx }}</span>
                  <a-input v-else placeholder="请输入现工作单位" v-model="fromState.fbghxx"
                          v-decorator="[ 'fbghxx', {initialValue:fromState.fbghxx,rules: rules.fbghxx}]"/>
                </a-form-item>
              </a-descriptions-item>
              <a-descriptions-item>
              <span slot="label" class="descriptions-label-slot">
                <span class="xhText" v-if="link == 1">*</span>
                  新单位部门
                </span>
                <a-form-item class="flex-w-row">
                  <span v-if="isView">{{ fromState.fxdwbm }}</span>
                  <a-input v-else placeholder="请输入新单位部门" v-model="fromState.fxdwbm"
                          v-decorator="[ 'fxdwbm', {initialValue:fromState.fxdwbm,rules: rules.fxdwbm}]"/>
                </a-form-item>
              </a-descriptions-item>
              <a-descriptions-item>
              <span slot="label" class="descriptions-label-slot">
                <span class="xhText" v-if="link == 1">*</span>
                  新单位到任时间
                </span>
                <a-form-item class="flex-w-row">
                  <span v-if="isView">{{ fromState.fxdwdrsj?moment(fromState.fxdwdrsj).format('YYYY-MM'):'' }}</span>
                  <!-- <a-date-picker v-else format="YYYY-MM" @change="fxdwdrsjChange"
                          v-decorator="[ 'fxdwdrsj', {initialValue:fromState.fxdwdrsj,rules: rules.fxdwdrsj}]"/> -->
                  <a-month-picker v-else placeholder="请选择时间" @change="fxdwdrsjChange"
                    v-decorator="[ 'fxdwdrsj', {initialValue:fromState.fxdwdrsj,rules: rules.fxdwdrsj}]"/>
                </a-form-item>
              </a-descriptions-item>
              <a-descriptions-item>
              <span slot="label" class="descriptions-label-slot">
                <span class="xhText" v-if="link == 1">*</span>
                  新单位岗位
                </span>
                <a-form-item class="flex-w-row">
                  <span v-if="isView">{{ fromState.fxdwgw }}</span>
                  <a-input v-else placeholder="请输入新单位岗位" v-model="fromState.fxdwgw"
                          v-decorator="[ 'fxdwgw', {initialValue:fromState.fxdwgw,rules: rules.fxdwgw}]"/>
                </a-form-item>
              </a-descriptions-item>
              <a-descriptions-item>
              <span slot="label" class="descriptions-label-slot">
                <span class="xhText" v-if="link == 1">*</span>
                  新单位职务
                </span>
                <a-form-item class="flex-w-row">
                  <span v-if="isView">{{ fromState.fxdwzw }}</span>
                  <a-input v-else placeholder="请输入新单位职务" v-model="fromState.fxdwzw"
                          v-decorator="[ 'fxdwzw', {initialValue:fromState.fxdwzw,rules: rules.fxdwzw}]"/>
                </a-form-item>
              </a-descriptions-item>
              <a-descriptions-item :span="2">
              <span slot="label" class="descriptions-label-slot">
                <span class="xhText" v-if="link == 1">*</span>
                  新单位地址
                </span>
                <a-form-item class="flex-w-row">
                  <span v-if="isView">{{ fromState.fxdwdz }}</span>
                  <a-input v-else placeholder="请输入新单位地址" v-model="fromState.fxdwdz"
                          v-decorator="[ 'fxdwdz', {initialValue:fromState.fxdwdz,rules: rules.fxdwdz}]"/>
                </a-form-item>
              </a-descriptions-item>
              <a-descriptions-item :span="3">
                <span slot="label" class="descriptions-label-slot">
                    上传附件(非必填)
                  </span>
                  <a-form-item class="flex-w-row">
                  <a-upload style="display: inline-block;" :beforeUpload="beforeUpload" :showUploadList="false" action="" @change="uploadClick">
                      <a-button v-if="!isView" class="blue-btn">选择文件<span style="color: red;margin-right: 10px;">(仅限PDF)</span></a-button>
                  </a-upload>
                  <!-- <div class="photo-frame" v-if="fromState.ffjdz">
                    <img :src="fromState.ffjdz" alt="" style="width:100%;height: 100%;"> -->
                  <!-- <div v-if="fromState.ffjdz">
                    <a href="#" @click="()=> {window.open(fromState.ffjdz,'_black')}">{{ fromState.ffjdz }}.pdf</a>
                  </div> -->
                  <a v-if="fromState.ffjdz" href="#" @click="openPdf(fromState.ffjdz)">变更工作单位附件.pdf</a>
                  <span v-else>暂无图片</span>
                </a-form-item>
              </a-descriptions-item>
              <a-descriptions-item :span="2"  v-if="link !== 1">
                <span slot="label" class="descriptions-label-slot">
                  <span class="xhText" v-if="link == 2">*</span>
                    意见
                </span>
                <a-form-item class="flex-w-row">
                  <span v-if="isView && link !== 2">{{ fromState.fblyj }}</span>
                  <a-textarea v-else placeholder="请输入意见" v-model="fromState.fblyj"
                          :auto-size="{ minRows: 3}"
                          v-decorator="[ 'fblyj', {initialValue:fromState.fblyj,rules: rules.fblyj}]"/>
                </a-form-item>
              </a-descriptions-item>
          </a-descriptions>
        </a-form>
      </div>
      <div v-if="link == 1" class="modal-footer-div">
        <a-button @click="saveForm">暂存</a-button>
        <a-button @click="subForm" class="blue-btn" style="margin-left: 10px;">提交</a-button>
      </div>
      <div v-if="link == 2" class="modal-footer-div">
        <a-button class="red-btn" @click="nextClick('否')">驳回</a-button>
        <a-button class="blue-btn" style="margin-left: 10px;" @click="nextClick('是')">同意</a-button>
      </div>
    </a-modal>
  </div>
</template>
<script>
import moment from 'moment'
import { queryBgsqInfo,querySqInfo,saveBgsqInGzdw,submitBgsqInGzdw,submitShInBgGzdw,uploadFile } from './service/index'
export default {
  data() {
    return {
      increaseVisible: false,
      formKey: '',
      moment,
      form: this.$form.createForm(this, { name: 'appointmentOfInspectorsFrom' }),
      fromState:{},
      rules:{
        fbghxx: [{
            required: true,
            message: '请输入现工作单位',
            trigger: 'blur',
        }],
        fblyj: [{
            required: true,
            message: '请输入意见',
            trigger: 'blur',
        }],
        fxdwbm: [{
            required: true,
            message: '请输入新单位部门',
            trigger: 'blur',
        }],
        fxdwdrsj: [{
            type: 'object',
            required: true,
            message: '请选择新单位到任时间',
            trigger: 'blur',
        }],
        fxdwgw: [{
            required: true,
            message: '请输入新单位岗位',
            trigger: 'blur',
        }],
        fxdwzw: [{
            required: true,
            message: '请输入新单位职务',
            trigger: 'blur',
        }],
        fxdwdz: [{
            required: true,
            message: '请输入新单位地址',
            trigger: 'blur',
        }],
      },
      link: 0,
      isView: false
    }
  },
  methods: {
    getData(){
      this.link = 1
      queryBgsqInfo().then(res => {
        //console.log(res)
        let resItem = res.result.sq
        // this.fromState.id = resItem.id
        // this.fromState.ffqsj = resItem.ffqsj?resItem.ffqsj:new Date()
        // this.fromState.realname = resItem.realname
        // this.fromState.fbgqxx = resItem.fbgqxx
        // this.fromState.fbghxx = resItem.fbghxx
        // this.fromState.ffjdz = resItem.ffjdz
        // this.fromState.fblyj = resItem.fblyj
        this.fromState = resItem
        this.fromState.ffqsj = resItem.ffqsj?moment(resItem.ffqsj):new Date()
        this.fromState.fxdwdrsj = resItem.fxdwdrsj?moment(resItem.fxdwdrsj):null
        //console.log(this.fromState)
        this.formKey = Date.now()
      })
    },
    getNewData(ids,link,view){
      this.link = link
      this.isView = view
      //console.log(this.link,this.isView)
      querySqInfo({id:ids}).then(res => {
        //console.log(res)
        let resItem = res.result
        // this.fromState.id = resItem.id
        // this.fromState.ffqsj = resItem.ffqsj?resItem.ffqsj:new Date()
        // this.fromState.realname = resItem.realname
        // this.fromState.fbgqxx = resItem.fbgqxx
        // this.fromState.fbghxx = resItem.fbghxx
        // this.fromState.ffjdz = resItem.ffjdz
        // this.fromState.fblyj = resItem.fblyj
        this.fromState = resItem
        this.fromState.ffqsj = resItem.ffqsj?moment(resItem.ffqsj):new Date()
        this.fromState.fxdwdrsj = resItem.fxdwdrsj?moment(resItem.fxdwdrsj):null
        //console.log(this.fromState)
        this.formKey = Date.now()
      })
    },
    fxdwdrsjChange(date, dateString){
      //console.log(date, dateString);
      this.fromState.fxdwdrsj = date?moment(date):null
      //console.log(this.fromState.fxdwdrsj)
    },
    closeVisible(){
      this.increaseVisible = false
      this.isView = false
      this.link = 0
      this.$emit('success')
    },
    openPdf(href){
      window.open(href,'_blank')
    },
    beforeUpload(e){
      return false
    },
    uploadClick({file}){
      var that = this
      if(file.type.indexOf('pdf') == -1){
        that.$message.warning('当前仅限上传PDF，请重新选择！')
        return
      }
      if(typeof file.uid !== 'undefined') {
          const fileData = new FormData();
          fileData.append("file",file);
          fileData.append("id",this.fromState.id);
          //console.log(fileData)
          uploadFile(fileData).then(res => {
            //console.log('fileData',res)
            if (res.success) {
              that.$message.success(res.message)
              that.fromState.ffjdz = res.result.ffjdz
              this.formKey = Date.now()
            } else {
              that.$message.warning(res.message)
            }
          })
        }
    },
    // 暂存
    saveForm(){
      let data = {
        id: this.fromState.id,
        ...this.fromState
      }
      saveBgsqInGzdw(data).then(res => {
        if(res.code == 200){
          this.$message.success(res.message)
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    // 提交
    subForm(){
      this.form.validateFields((err, values) => {
        if(!err){
          let data = {
            id: this.fromState.id,
            ...this.fromState
          }
          data.ffqsj = moment(data.ffqsj).format('YYYY-MM-DD')
          data.fxdwdrsj = moment(data.fxdwdrsj).format('YYYY-MM')
          submitBgsqInGzdw(data).then(res => {
            if(res.code == 200){
              this.$message.success(res.message)
              this.closeVisible()
            } else {
              this.$message.warning(res.message)
            }
          })
        }
      })
    },
    // 驳回
    nextClick(isAgree){
      this.form.validateFields((err, values) => {
        if(!err){
          let data = {
            id: this.fromState.id,
            opinion: this.fromState.fblyj,
            sfty: isAgree
          }
          submitShInBgGzdw(data).then(res => {
            if(res.code == 200){
              this.$message.success(res.message)
              this.closeVisible()
            } else {
              this.$message.warning(res.message)
            }
          })
        }
      })
    }
  },
}
</script>
<style lang="less">
.form-workUnitChangeModal-Lu {
  .personal-info-form{
    .ant-form-item{
        margin: 5px 0;
    }
    .ant-form-item-label{
        width: 118px;
        font-weight: 600;
    }
    .ant-form-item-control-wrapper{
        // width: 180px;
    }
    .flex-w-er{
        width: 596px;
        .ant-form-item-control-wrapper{
            width: calc(100% - 118px);
        }
    }
    .flex-w-san{
      // width: 885px;
      width: calc(100vw - 1180px);
      min-width: 865px;
      .ant-form-item-control-wrapper{
            width: calc(100% - 118px);
        }
    }
    .flex-w-row {
      width: 100%;
      .ant-form-item-control-wrapper{
            width: calc(100%);
        }
    }
    .flex-w-label {
      .ant-form-item-label{
          width: 250px;
      }
    }
  }
  .modal-footer-div {
    display: flex;
    justify-content: end;
    margin-top: 30px;
  }
  .photo-frame {
    width: 100%;
    height: 300px;
    border: 1px dashed #d9d9d9;
    background-color: #fafafa;
    border-radius: 4px;
  }
  //---
  .ant-descriptions-bordered .ant-descriptions-item-label{
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
        background-color:#e6f7ff;
        width: 150px !important;
        text-align: right;
        font-size: 16px;
    }
    .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
        padding: 5px 10px !important;

    }
    .descriptions-dengji {
        .descriptions-label-slot{
          display: flex;
          align-items: center;
          width: 123px !important;//确保左侧固定文字不会换行
          line-height: 2;
          text-align: center;
          justify-content: center;
      }
      .descriptions-content-item {
        .ant-form-item-control-wrapper{
            width: 100%;
        }
      }
    }
    .descriptions-row .descriptions-label-slot{
        display: flex;
        align-items: center;
        width: 100px !important;//确保左侧固定文字不会换行
    }
    .xhText{

        color: #f5222d;
        line-height: 36px;
        font-size: 21px;
        font-weight: 600;
        height: 30px;
    }
    .descriptions-item-center{

    }
    .ant-form-inline .ant-form-item-with-help{
        margin-bottom: 0px !important;
    }
    .zm-form-model{
        display: flex;
        .ant-form-item-control-wrapper{
            flex: 1;
        }
    }
    .ant-descriptions-bordered .ant-descriptions-row{
        border-bottom: 1px solid #e4e3e3;
    }
    .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
        border-right: 1px solid #e4e3e3;
        line-height: 3;
        min-width: 100px;
    }
    .ant-descriptions-bordered .ant-descriptions-view{
        border: 1px solid #e4e3e3;
        border-right: 0;
    }
    .ant-descriptions-row:last-child{
        border-bottom: 0;
    }
}
</style>
